<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/principal.xhtml">

    <ui:define name="content" id="content">
        <h:form id="frmContaBancaria">
            <p:panel id="panel" header="Bem Vindo ao Cadastro de Contas Bancárias">
                <p:growl id="messages" life="5000" />

                <p:dataTable id="tabcontaBancaria" widgetVar="wtabcontaBancaria" var="contabancaria" value="#{contaBancariaBean.lazyModel}" filterEvent="enter"
                             lazy="true" paginator="true" rows="12" paginatorPosition="top" emptyMessage="Nenhum Registro Retornado ..." style="text-align: left;">

                    <p:column headerText="Banco" sortBy="#{contabancaria.idBanco.nomBanco}" filterBy="#{contabancaria.idBanco.nomBanco}">
                        <h:outputText value="#{contabancaria.idBanco.nomBanco}" />
                    </p:column>

                    <p:column headerText="Descrição" sortBy="#{contabancaria.dscConta}" filterBy="#{contabancaria.dscConta}">
                        <h:outputText value="#{contabancaria.dscConta}" />
                    </p:column>

                    <p:column headerText="Agência" sortBy="#{contabancaria.numAgencia}" filterBy="#{contabancaria.numAgencia}">
                        <h:outputText value="#{contabancaria.numAgencia}" />
                    </p:column>

                    <p:column headerText="Conta" sortBy="#{contabancaria.numConta}" filterBy="#{contabancaria.numConta}">
                        <h:outputText value="#{contabancaria.numConta}" />
                    </p:column>

                    <p:column headerText="Saldo Inicial">
                        <div style="text-align: right">
                            <h:outputText value="#{contabancaria.vlrSaldoInicial}">
                                <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </div>
                    </p:column>

                    <p:column style="width: 100px;">
                        <h:panelGrid columns="4" styleClass="actions" cellpadding="0">
                            <p:commandButton id="selectButton" update=":frmContaBancaria:panel :frmContaBancaria:messages" 
                                             icon="ui-icon-search" title="Visualizar // Alterar Conta Bancária" oncomplete="PF('dialog').show()">
                                <f:setPropertyActionListener value="#{contabancaria}" target="#{contaBancariaBean.selectedContaBancaria}" />
                                <f:setPropertyActionListener value="#{false}" target="#{contaBancariaBean.salvar}" />
                            </p:commandButton>

                            <p:commandButton id="excluirButton" update=":frmContaBancaria:panel :frmContaBancaria:messages" 
                                             icon="ui-icon-trash" title="Excluir Conta Bancária" oncomplete="PF('confirmation').show()">
                                <f:setPropertyActionListener value="#{contabancaria}" target="#{contaBancariaBean.selectedContaBancaria}" />
                            </p:commandButton>
                        </h:panelGrid>
                    </p:column>

                    <f:facet name="footer">
                        <div style="text-align: left;">
                            <p:commandButton id="incluirButton" actionListener="#{contaBancariaBean.preparaInserir}" 
                                             update=":frmContaBancaria:panel :frmContaBancaria:messages" value="Nova Conta Bancária"
                                             icon="ui-icon-pencil" title="Cadastrar Nova Conta Bancária" oncomplete="PF('dialog').show()" />
                        </div>
                    </f:facet>

                </p:dataTable>

                <p:dialog id="dialogBancaria" header="Detalhes Conta Bancária" widgetVar="dialog" resizable="true"
                          width="750" showEffect="explode" hideEffect="explode">

                    <p:tabView id="displayTab" widgetVar="displayTab" activeIndex="0" style="width: 100%; text-align: left;" effect="scale">
                        <p:tab id="tabPrincipal" title="Dados Principais" titleStyle="text-align: center; font-weight: bold;">
                            <h:panelGrid id="display1" columns="2">
                                <h:outputText value="*Descrição:" />
                                <p:inputText id="Descricao" value="#{contaBancariaBean.selectedContaBancaria.dscConta}" style="width:500px; font-weight:bold" />

                                <h:outputText value="*Agencia:" />
                                <p:inputText id="inAgencia" value="#{contaBancariaBean.selectedContaBancaria.numAgencia}" style="width:200px; font-weight:bold" />

                                <h:outputText value="*Numero Conta:" />
                                <p:inputText id="inNumConta" value="#{contaBancariaBean.selectedContaBancaria.numConta}" style="width:300px; font-weight:bold" />

                                <h:outputText value="*Data Abertura:" />
                                <p:inputMask id="imDatEmissao" value="#{contaBancariaBean.selectedContaBancaria.datAbertura}" mask="99/99/9999" 
                                             style="font-weight:bold; text-align: left; width: 150px;">
                                    <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                                </p:inputMask>

                                <h:outputText value="*Moeda:" />
                                <h:panelGrid columns="2">
                                    <p:inputText id="innomMoeda" value="#{contaBancariaBean.selectedContaBancaria.idMoeda.nomMoeda}"
                                                 readonly="true" style="width:300px; font-weight:bold" />
                                    <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Moeda" onclick="PF('pesqMoedaDialog').show()"/>
                                </h:panelGrid>

                                <h:outputText value="Saldo Inicial:" />
                                <p:inputText id="inSaldoInicial" value="#{contaBancariaBean.selectedContaBancaria.vlrSaldoInicial}" style="width:200px; font-weight:bold; text-align: right;"
                                             onkeyup="javascript:maskIt(this, event, '###.###.###,##', true)">
                                    <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                </p:inputText>

                                <h:outputText value="*Tipo Conta:" />
                                <h:panelGrid columns="2">
                                    <p:inputText id="inTipConta" value="#{contaBancariaBean.selectedContaBancaria.idTipo.dscTipo}" readonly="true" style="width:300px; font-weight:bold" />
                                    <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Tipo de Conta" onclick="PF('pesqTipoDialog').show()"/>
                                </h:panelGrid>

                                <h:outputText value="*Banco:" />
                                <h:panelGrid columns="2">
                                    <p:inputText id="inBanco" value="#{contaBancariaBean.selectedContaBancaria.idBanco.nomBanco}" readonly="true" style="width:300px; font-weight:bold" />
                                    <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Banco" onclick="PF('pesqBancoDialog').show()"/>
                                </h:panelGrid>

                            </h:panelGrid>
                        </p:tab>
                        <p:tab id="tabComplementar" title="Dados Complementares">
                            <h:panelGrid id="display2" columns="2">
                                <h:outputText value="Nome Titular:" />
                                <p:inputText id="inNomTitular" value="#{contaBancariaBean.selectedContaBancaria.nomTitular}" style="width:400px; font-weight:bold" />

                                <h:outputText value="Limite Crédito:" />
                                <p:inputText id="inLimitCredito" value="#{contaBancariaBean.selectedContaBancaria.limiteCredito}" style="width:200px; font-weight:bold; text-align: right;"
                                             onkeyup="javascript:maskIt(this, event, '###.###.###,##', true)">
                                    <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                </p:inputText>

                                <h:outputText value="Data Limite Crédito:" />
                                <p:inputMask id="imDatLimite" value="#{contaBancariaBean.selectedContaBancaria.datLimiteCredito}" mask="99/99/9999" 
                                             style="font-weight:bold; text-align: left; width: 150px;">
                                    <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                                </p:inputMask>


                                <h:outputText value="Conta Desativada:" />
                                <h:selectBooleanCheckbox value="#{contaBancariaBean.selectedContaBancaria.tipStatus}" />
                            </h:panelGrid>
                        </p:tab>
                        <p:tab id="tabContato" title="Dados Contato">
                            <h:panelGrid id="display3" columns="2">
                                <h:outputText value="Nome Contato:" />
                                <p:inputText id="inNomContato" value="#{contaBancariaBean.selectedContaBancaria.nomContato}" style="width:400px; font-weight:bold" />

                                <h:outputText value="Tipo Telefone: " />
                                <h:selectOneMenu value="#{contaBancariaBean.selectedContaBancaria.tipTelefone1}">
                                    <!--                                <f:selectItem itemLabel="Selecione Tipo" itemValue="" /> -->
                                    <f:selectItem itemLabel="Comercial" itemValue="Comercial" />
                                    <f:selectItem itemLabel="Particular" itemValue="Particular" />
                                    <f:selectItem itemLabel="Celular" itemValue="Celular" />
                                    <f:selectItem itemLabel="Fax" itemValue="Fax" />
                                </h:selectOneMenu>

                                <h:outputText value="Numero Telefone: " />
                                <p:inputMask value="#{contaBancariaBean.selectedContaBancaria.numTelefone1}" mask="(99) 9999-9999"/>

                                <h:outputText value="Tipo Telefone: " />
                                <h:selectOneMenu value="#{contaBancariaBean.selectedContaBancaria.tipTelefone2}">
                                    <!--                                <f:selectItem itemLabel="Selecione Tipo" itemValue="" /> -->
                                    <f:selectItem itemLabel="Comercial" itemValue="Comercial" />
                                    <f:selectItem itemLabel="Particular" itemValue="Particular" />
                                    <f:selectItem itemLabel="Celular" itemValue="Celular" />
                                    <f:selectItem itemLabel="Fax" itemValue="Fax" />
                                </h:selectOneMenu>

                                <h:outputText value="Numero Telefone: " />
                                <p:inputMask value="#{contaBancariaBean.selectedContaBancaria.numTelefone2}" mask="(99) 9999-9999"/>

                                <h:outputText value="Tipo Telefone: " />
                                <h:selectOneMenu value="#{contaBancariaBean.selectedContaBancaria.tipTelefone3}">
                                    <!--                                <f:selectItem itemLabel="Selecione Tipo" itemValue="" /> -->
                                    <f:selectItem itemLabel="Comercial" itemValue="Comercial" />
                                    <f:selectItem itemLabel="Particular" itemValue="Particular" />
                                    <f:selectItem itemLabel="Celular" itemValue="Celular" />
                                    <f:selectItem itemLabel="Fax" itemValue="Fax" />
                                </h:selectOneMenu>

                                <h:outputText value="Numero Telefone: " />
                                <p:inputMask value="#{contaBancariaBean.selectedContaBancaria.numTelefone3}" mask="(99) 9999-9999"/>

                                <h:outputText value="E-Mail: " />
                                <p:inputText id="inEmail" value="#{contaBancariaBean.selectedContaBancaria.dscEmail}" style="width:500px; font-weight:bold" />
                            </h:panelGrid>
                        </p:tab>
                        <p:tab id="Observacao" title="Observações">
                            <h:panelGrid id="display4" columns="1" style="text-align: center">
                                <p:inputTextarea value="#{contaBancariaBean.selectedContaBancaria.dscObs}" style="width:600px;height:300px; font-weight:bold" />
                            </h:panelGrid>
                        </p:tab>
                    </p:tabView>
                    <div style="text-align: left;">
                        <p:commandButton value="Salvar" update=":frmContaBancaria:panel :frmContaBancaria:tabcontaBancaria :frmContaBancaria:messages" rendered="#{contaBancariaBean.salvar}"
                                         actionListener="#{contaBancariaBean.inserir}" oncomplete="handleFormRequest(xhr, status, args)" />
                        <p:commandButton value="Salvar" update=":frmContaBancaria:panel :frmContaBancaria:tabcontaBancaria :frmContaBancaria:messages" rendered="#{!contaBancariaBean.salvar}"
                                         actionListener="#{contaBancariaBean.alterar}" oncomplete="handleFormRequest(xhr, status, args)" />
                    </div>
                </p:dialog>

                <p:dialog id="dialogPesqMoeda" header="Pesquisa de Moeda" widgetVar="pesqMoedaDialog" resizable="true"
                          width="600" showEffect="explode" hideEffect="explode" position="right,top">

                    <p:dataTable id="tabMoeda" widgetVar="wtabMoeda" var="moeda" value="#{moedaBean.lazyModel}" style="text-align: left;"
                                 paginator="true" rows="5" lazy="true" emptyMessage="Nenhuma Moeda retornada ..." filterEvent="enter">

                        <p:column headerText="Descrição" sortBy="#{moeda.nomMoeda}" filterBy="#{moeda.nomMoeda}">
                            <h:outputText value="#{moeda.nomMoeda}" />
                        </p:column>

                        <p:column headerText="Sigla" sortBy="#{moeda.sigla}" filterBy="#{moeda.sigla}">
                            <h:outputText value="#{moeda.sigla}" />
                        </p:column>

                        <p:column headerText="Cotação" sortBy="#{moeda.cotacao}" filterBy="#{moeda.cotacao}" style="text-align: right;">
                            <h:outputText value="#{moeda.cotacao}" >
                                <f:convertNumber locale="pt_BR" pattern="#,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </p:column>

                        <p:column id="date" headerText="Data Cotação" filterBy="#{moeda.dataCotacao}" sortBy="#{moeda.dataCotacao}" style="text-align: center;">
                            <h:outputText value="#{moeda.dataCotacao}">
                                <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                            </h:outputText>
                        </p:column>

                        <p:column style="width: 50px">
                            <p:panelGrid styleClass="actions" columns="1">
                                <p:commandButton id="selectButtonMoeda" update=":frmContaBancaria:displayTab :frmContaBancaria:messages" 
                                                 icon="ui-icon-check" title="Selecionar Moeda" oncomplete="PF('pesqMoedaDialog').hide()">
                                    <f:setPropertyActionListener value="#{moeda}" target="#{contaBancariaBean.selectedMoeda}" />
                                </p:commandButton>
                            </p:panelGrid>
                        </p:column>

                    </p:dataTable>

                </p:dialog>

                <p:dialog id="dialogPesqTipo" header="Pesquisa Tipo de Conta" widgetVar="pesqTipoDialog" resizable="true"
                          width="600" showEffect="explode" hideEffect="explode" position="right,top">

                    <p:dataTable id="tabTipoConta" widgetVar="wtabTipoConta" var="tipoConta" value="#{tipoContaBean.lazyModel}" style="text-align: left;"
                                 paginator="true" rows="5" lazy="true" emptyMessage="Nenhuma Moeda retornada ..." filterEvent="enter">

                        <p:column headerText="Descrição" sortBy="#{tipoConta.dscTipo}" filterBy="#{tipoConta.dscTipo}">
                            <h:outputText value="#{tipoConta.dscTipo}" />
                        </p:column>

                        <p:column style="width: 50px">
                            <p:panelGrid styleClass="actions" columns="1">
                                <p:commandButton id="selectButtonTippoConta" update=":frmContaBancaria:displayTab :frmContaBancaria:messages" 
                                                 icon="ui-icon-check" title="Selecionar Tipo de Conta" oncomplete="PF('pesqTipoDialog').hide()">
                                    <f:setPropertyActionListener value="#{tipoConta}" target="#{contaBancariaBean.selectedTipoConta}" />
                                </p:commandButton>
                            </p:panelGrid>
                        </p:column>

                    </p:dataTable>

                </p:dialog>

                <p:dialog id="dialogPesqBanco" header="Pesquisa de Banco" widgetVar="pesqBancoDialog" resizable="true"
                          width="800" showEffect="explode" hideEffect="explode" position="right,top">

                    <p:dataTable id="tabBanco" widgetVar="wtabBanco" var="banco" value="#{bancoBean.lazyModel}" style="text-align: left;"
                                 paginator="true" rows="5" lazy="true" emptyMessage="Nenhuma Moeda retornada ..." filterEvent="enter">

                        <p:column headerText="Numero" sortBy="#{banco.numero}" filterBy="#{banco.numero}">
                            <h:outputText value="#{banco.numero}" />
                        </p:column>

                        <p:column headerText="Descrição" sortBy="#{banco.nomBanco}" filterBy="#{banco.nomBanco}">
                            <h:outputText value="#{banco.nomBanco}" />
                        </p:column>

                        <p:column style="width:32px; text-align: center;">
                            <h:outputLink target="_blank" value="#{banco.link}" title="Abrir Pagina">
                                <p:graphicImage value="../images/home.png" />
                            </h:outputLink>
                        </p:column>

                        <p:column style="width: 50px">
                            <p:panelGrid styleClass="actions" columns="1">
                                <p:commandButton id="selectButtonBanco" update=":frmContaBancaria:displayTab :frmContaBancaria:messages" 
                                                 icon="ui-icon-check" title="Selecionar Banco" oncomplete="PF('pesqBancoDialog').hide()">
                                    <f:setPropertyActionListener value="#{banco}" target="#{contaBancariaBean.selectedBanco}" />
                                </p:commandButton>
                            </p:panelGrid>
                        </p:column>
                    </p:dataTable>

                </p:dialog>

                <p:dialog header="Confirma a Exclusão desse Tipo de Conta?" widgetVar="confirmation">

                    <p:commandButton value="Sim" update=":frmContaBancaria:panel :frmContaBancaria:tabcontaBancaria :frmContaBancaria:messages" oncomplete="PF('confirmation').hide(), PF('dialog').hide()"
                                     actionListener="#{contaBancariaBean.excluir}" />
                    <p:commandButton value="Não" onclick="PF('confirmation').hide()" type="button" />

                </p:dialog>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>